<template>
    <div v-if="show">
        <el-dialog
            class="dialog-pages"
            title="选择页面"
            width="800px"
            top="10vh"
            v-model="data.showPage"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="onClose"
        >
            <el-tabs v-model="tabName" @tab-click="handleTab">
                <el-tab-pane label="装修页面" name="0">
                    <el-table
                        class="table-mb"
                        :data="data.pageArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="data.pageLoading"
                    >
                        <el-table-column prop="title" label="页面名称"></el-table-column>
                        <el-table-column prop="created_at_label" label="最后保存时间"></el-table-column>
                        <el-table-column label="操作" width="120" class-name="operation-nav" fixed="right">
                            <template #default="{ row }">
                                <p class="link-p" @click.stop="handleSelect(row)">选择页面</p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="data.linkPage"
                        :page-size="10"
                        :total="data.totalPage"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="功能页面" name="1">
                    <el-table
                        class="table-mb"
                        :data="data.pageFunArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        height="520"
                    >
                        <el-table-column prop="title" label="页面名称"></el-table-column>
                        <el-table-column label="操作" width="120" class-name="operation-nav" fixed="right">
                            <template #default="{ row }">
                                <p class="link-p" @click.stop="handleSelect(row)">选择页面</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="商品分类" name="2" v-if="showCate">
                    <el-table
                        class="table-mb"
                        :data="data.cateArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        height="520"
                    >
                        <el-table-column prop="title" label="商品名称"></el-table-column>
                        <el-table-column label="操作" width="120" class-name="operation-nav" fixed="right">
                            <template #default="scope">
                                <p class="link-p" @click.stop="handleSelect(scope.row, scope.$index)">选择</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="公共商品" name="3" v-if="showPublic">
                    <el-table
                        class="table-mb"
                        :data="data.pubGoods"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="data.pubGoodLoading"
                    >
                        <el-table-column prop="product_common_id" label="公共商品ID" width="110"></el-table-column>
                        <el-table-column prop="product_name" label="商品名称"></el-table-column>
                        <el-table-column prop="color" label="颜色"></el-table-column>
                        <el-table-column label="操作" width="120" class-name="operation-nav" fixed="right">
                            <template #default="scope">
                                <p class="link-p" @click.stop="handleSelect(scope.row, scope.$index)">选择</p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="data.pubPage"
                        :page-size="10"
                        :total="data.pubGount"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="文章分类" name="4" v-if="showNews">
                    <el-table
                        class="table-mb"
                        :data="data.cateNews"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="data.cateNewLoading"
                    >
                        <el-table-column prop="cate_id" label="分类ID" width="150"></el-table-column>
                        <el-table-column prop="title" label="分类名称"></el-table-column>
                        <el-table-column label="操作" width="120" class-name="operation-nav" fixed="right">
                            <template #default="scope">
                                <p class="link-p" @click.stop="handleSelect(scope.row, scope.$index)">选择</p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="data.cateNewPage"
                        :page-size="10"
                        :total="data.cateNewGount"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="文章列表" name="5" v-if="showNewList">
                    <el-table
                        class="table-mb"
                        :data="data.cateNewList"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="data.cateNewListLoading"
                    >
                        <el-table-column prop="article_id" label="文章ID" width="150"></el-table-column>
                        <el-table-column prop="title" label="文章标题"></el-table-column>
                        <el-table-column label="操作" width="120" class-name="operation-nav" fixed="right">
                            <template #default="scope">
                                <p class="link-p" @click.stop="handleSelect(scope.row, scope.$index)">选择</p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="data.cateNewListPage"
                        :page-size="10"
                        :total="data.cateNewListGount"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script setup>
import { reactive, onMounted, ref, getCurrentInstance, onBeforeUnmount, watch } from "vue"
const { proxy } = getCurrentInstance()
/** 自定义页面路径 */
const indexPage = "/pages/index/index"
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    // 商品分类
    showCate: {
        type: Boolean,
        default: false,
    },
    // 公共商品
    showPublic: {
        type: Boolean,
        default: false,
    },
    // 文章分类
    showNews: {
        type: Boolean,
        default: false,
    },
    // 文章列表
    showNewList: {
        type: Boolean,
        default: false,
    },
})

const data = reactive({
    showPage: true, // 是否显示弹窗
    linkItem: {}, // 当前选中的页面数据
    pageArrs: [], // 自定义页面

    // 功能页面
    totalPage: 0, // 功能页总数
    pageLoading: false, // 加载状态
    linkPage: 1, // 当前页码
    pageFunArrs: [
        {
            title: "首页",
            url: "/pages/index/index",
            type: "switchTab",
        },
        {
            title: "分类",
            url: "/pages/classify/classify",
            type: "switchTab",
        },
        {
            title: "购物车",
            url: "/pages/cart/cart",
            type: "switchTab",
        },
        {
            title: "我的",
            url: "/pages/center/center",
            type: "switchTab",
        },
        {
            title: "天天特惠",
            url: "/pages/preferential/preferential",
            type: "navigate",
        },
        {
            title: "秒杀列表",
            url: "/pages/seckill/seckill",
            type: "navigate",
        },
        {
            title: "领取优惠券",
            url: "/pages/receiveCoupon/receiveCoupon",
            type: "navigate",
        },
        {
            title: "常购清单",
            url: "/pages/frequentlyPurchase/frequentlyPurchase",
            type: "navigate",
        },
        {
            title: "交易趋势",
            url: "/pages/transactionTrend/transactionTrend",
            type: "navigate",
        },
        {
            title: "交易须知",
            url: "/pages/transactionText/transactionText",
            type: "navigate",
        },
        {
            title: "联系客服",
            url: "/pages/contactService/contactService",
            type: "navigate",
        },
        {
            title: "关注店铺",
            url: "/pages/collectStore/collectStore",
            type: "navigate",
        },
        {
            title: "收藏商品",
            url: "/pages/collectGoods/collectGoods",
            type: "navigate",
        },
    ],

    cateArrs: [], // 商品分类

    // 公共商品列表
    pubGoodLoading: false,
    pubGoods: [],
    pubPage: 1, // 公共商品页码
    pubGount: 0, // 公共商品总数

    // 文章分类
    cateNewLoading: false,
    cateNews: [],
    cateNewPage: 1,
    cateNewGount: 0,

    // 文章列表
    cateNewListLoading: false,
    cateNewList: [],
    cateNewListPage: 1,
    cateNewListGount: 0,
})

onMounted(() => {
    getPage()
    props.showCate && getCates()
    props.showPublic && getPublicGoods()
    props.showNews && getCateNews()
    props.showNewList && getCateNewList()
})

onBeforeUnmount(() => {
    data.pageLoading = false
    data.linkItem = {}
    data.linkPage = 1
    data.pageArrs = []
    data.catePage = 1
    data.pubGount = 0
    data.pubPage = 0
})

const emits = defineEmits(["change", "close"])

const tabName = ref("0")
const handleTab = (pane) => {
    tabName.value = pane.index
}

// 关闭弹窗
const onClose = () => {
    emits("close")
}

// 获取功能页面
watch(
    () => data.linkPage,
    (val) => {
        data.pageArrs = []
        getPage()
    }
)
function getPage() {
    data.pageLoading = true
    proxy.$axios
        .get("decorate/index", {
            params: {
                page: data.linkPage,
                limit: 10,
            },
        })
        .then((res) => {
            data.pageLoading = false
            if (res.data.code == 0) {
                let result = res.data.data
                data.totalPage = res.data.count
                data.pageArrs = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            data.pageLoading = false
        })
}

// 获取分类 后台-product/com
function getCates() {
    proxy.$axios1
        .get("/api/product/cate")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                data.cateArrs = result
            } else {
                proxy.$message({ message: res.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 获取公共商品
watch(
    () => data.pubPage,
    (val) => {
        data.pubGoods = []
        getPublicGoods()
    }
)
function getPublicGoods() {
    data.pubGoodLoading = true
    proxy.$axios1
        .get("/api/product/items", {
            params: {
                page: data.pubPage,
                limit: 10,
            },
        })
        .then((res) => {
            data.pubGoodLoading = false
            if (res.data.code == 0) {
                let result = res.data.data
                data.pubGount = res.data.count
                data.pubGoods = result
            } else {
                proxy.$message({ message: res.msg, type: "error" })
            }
        })
        .catch((err) => {
            data.pubGoodLoading = false
        })
}

// 获取文章分类
watch(
    () => data.cateNewPage,
    (val) => {
        data.cateNews = []
        getCateNews()
    }
)
function getCateNews() {
    data.cateNewLoading = true
    proxy.$axios1
        .get("/api/article/cate", {
            params: {
                page: data.cateNewPage,
                limit: 10,
            },
        })
        .then((res) => {
            data.cateNewLoading = false
            if (res.data.code == 0) {
                let result = res.data.data
                data.cateNewGount = res.data.count
                data.cateNews = result
            } else {
                proxy.$message({ message: res.msg, type: "error" })
            }
        })
        .catch((err) => {
            data.cateNewLoading = false
        })
}

// 获取文章分类
watch(
    () => data.cateNewListPage,
    (val) => {
        data.cateNewList = []
        getCateNewList()
    }
)
function getCateNewList() {
    data.cateNewListLoading = true
    proxy.$axios1
        .get("/api/article/index", {
            params: {
                page: data.cateNewListPage,
                limit: 10,
            },
        })
        .then((res) => {
            data.cateNewListLoading = false
            if (res.data.code == 0) {
                let result = res.data.data
                data.cateNewListGount = res.data.count
                data.cateNewList = result
            } else {
                proxy.$message({ message: res.msg, type: "error" })
            }
        })
        .catch((err) => {
            data.cateNewListLoading = false
        })
}

/** 选中页面 */
const handleSelect = (row, index) => {
    let page_id = row.decorate_id || 0
    let types = row.type ? row.type : "navigate"
    data.linkItem = {
        urlText: row.product_common_id ? row.product_name : row.title,
        page_id: page_id,
    }
    if (row.cate_id && tabName.value == 2) {
        // 商品分类
        data.linkItem.cur = index
        data.linkItem.cate_id = row.cate_id
        data.linkItem.type = "cate"
    } else if (row.product_common_id) {
        // 公共商品
        data.linkItem.pc_id = row.product_common_id
        data.linkItem.color = row.color
        data.linkItem.product_name = row.product_name
        data.linkItem.type = "publicGood"
    } else if (row.cate_id && tabName.value == 4) {
        // 文章分类
        data.linkItem.cate_id = row.cate_id
        data.linkItem.type = "cateNews"
    } else if (row.article_id) {
        // 文章列表-链接具体某一篇文章
        data.linkItem.article_id = row.article_id
        data.linkItem.article_name = row.title
        data.linkItem.type = "cateNewList"
    } else {
        // 功能页或自定义页面
        data.linkItem.url = row.url || indexPage + "?id=" + page_id
        data.linkItem.type = page_id == 1 ? "switchTab" : types
    }
    // console.log("data.linkItem ", data.linkItem)
    emits("change", data.linkItem)
}
</script>
<style lang="less" scoped>
.table-mb {
    .link-p {
        cursor: pointer;
        font-size: @font-size-md;
        color: @gray-7;

        &:hover {
            color: @themes;
        }
    }

    .link-active {
        color: @themes;
        font-weight: bold;
    }
}
</style>
<style lang="less">
.dialog-pages {
    .el-dialog__body {
        padding: 10px 20px 20px;
    }
}
</style>
